<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event_Toggle</title>
<script src='../lib/jquery-2.1.1.js'></script>
<script>
	$(document).ready(function(){
 		$('.menu').css({
			'display':'inline-block',
			'vertical-align':'top'
		}) 
 		$('#holl1').css('float','left');
		$('#holl2').css('float','left');
		
		$('#menu1, #menu2').css({
			'color':'#ffffff',
			'font-size':'20pt',
			'font-weight':'bold',
			'border':'3px outset #ff00dd',
			'background-color' : '#ff00dd',
			'border-radius':'10px',
			'box-shadow' : '2px 2px 3px',
			'padding' : '6px',
			'width' : '200px',
			'margin-left':'5px',
			'text-align' : 'center',
			'cursor':'pointer'
	
		});
		
		$('#item1, #item2').css({
			'border':'3px inset #ff00dd',
			'padding' : '2px',
			'width' : '208px',
			'margin-top':'5px',
			'margin-left':'5px',
			'border-radius':'10px',
			'position': 'absolute', 
			'background-color':'#ffffff'
			
		
		});
/* 		$('#item1, #item2').hide(); */
		
		$('#menu1,#menu2').hover(function (){
			//over
			$(this).css('background-color','#eeeeee');
		},function(){
			//out
			$(this).css('background-color','#ff00dd');
		});
		
		$('#menu1').click(function(){
			$('#item1').toggle(500);
			$('#item2').hide(1000);
		});
		$('#menu2').click(function(){
			$('#item2').toggle(500);
			$('#item1').hide(1000);
		});
	});



</script>
</head>
<body>
<div class='menu'>
<div id='holl1'>
	<div id='menu1'>File Menu</div>
	<div id='item1'>
		<ul>
	
			<li>파일 읽기</li>
			<li>파일 저장</li>
			<li>새 이름으로 저장</li>	
			<li>파일명 변경</li>
			
		</ul>
	</div>
</div>

<div id='holl2'>
	<div id='menu2'>Edit Menu</div>
	<div id='item2'>
		<ul>
			<li>복사 </li>
			<li>붙여넣기</li>
			<li>선택 붙여넣기</li>	
			<li>삭제</li>
		</ul>
	</div>
</div>
</div>

<h3>&nbsp;&nbsp;&nbsp;Contents</h3>
</body>
</html>